<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>23软件技术一班，23003009，陈赞吉，轮播图</title>
</head>
    <style>
        *{
            list-style-type: none;
        }
        .bigdiv{
            height: 800px;
            width: 500px;
            margin: 0 auto;
            border-radius: 15px;
            -moz-box-shadow:0px 0px 10px #333333; 
            -webkit-box-shadow:0px 0px 10px #333333; 
            box-shadow:0px 0px 10px #333333;
            position: relative;
        }
        .head{
            border-bottom: 1px gray solid;
            height: 120px;
        }
        .shuru{
            height: 50px;
            width: 300px;
            border: 1px gray solid;
            border-radius: 10px;
            position: absolute;
            left: 100px;
            right: 100px;
            top: 50px;
        }
        h2{
            text-align: center;
        }
        .foot{
            height: 680px;
            width: 100%;
        }
        li{
            width: 420px;
            height: 40px;
            border: 1px black solid;
            display: block;
            margin-top: 10px;   
            border-radius: 10px;
            position: relative;
            transition: .3s;
            
        }
        li:hover{
            -moz-box-shadow:0px 0px 5px #FF0000; 
            -webkit-box-shadow:0px 0px 5px #FF0000; 
            box-shadow:0px 0px 5px #FF0000;
        }
        
        button{
            right: 10px;
            top: 10px;
            position: absolute;
        }
        input{
            position: absolute;
            left: -30px;
            top: 10px;
        }
        span{
            line-height: 35px;
        }
        input:hover{
            -moz-box-shadow:0px 0px 5px #FF0000; 
            -webkit-box-shadow:0px 0px 5px #FF0000; 
            box-shadow:0px 0px 5px #FF0000;
        }
    </style>
<body>
    <div class="bigdiv">
        <div class="head">
            <h2>代办列表</h2>
        <input type="text" class="shuru" placeholder="输入待办项目后点击回车">
        </div>
        <div class="foot">
            <ul id="qingdan">
                
            </ul>
        </div>
        <script>
            let i = 0
            let shuru = document.querySelector('.shuru')
            let text = document.querySelector('input')
            let ul = document.getElementById('qingdan')
            let li = document.querySelector('li')
            shuru.addEventListener('keyup',function(e){
                if(e.key === 'Enter'){
                    if(text.value.trim() ===''){
                        alert('你必须输入内容')
                        text.value = ''
                    }else if(text.value.trim() !==''){
                        i+=1
                        let li = document.createElement("li")
                        li.innerHTML = `<span>${text.value}</span><input type="checkbox"><button>删除</button>`
                        ul.appendChild(li)
                        text.value=''
                    }
                }
                
            })
            
            qingdan.addEventListener('click',function(e){
                if(e.target.tagName ==="BUTTON"){
                    e.target.parentElement.remove()
                }
            })
            
           
        </script>
        
    </div>
    
</body>

</html>